{% extends "base.html" %}
{% block header %}
    <header class="ui-header ui-header-positive ui-border-b">
        <h1>图书推荐</h1>
    </header>
{% endblock %}
{% block container %}
    <section class="ui-container">
    <section class="ui-panel">
        <div class="ui-flex ui-center" style="background-image:url({{ url_for('static', filename='img/title.jpg')}});
                background-size:100% 100%;">
            <h1 style="font-size: 24px; color: #fafafa">推荐购买图书</h1>
        </div>
    </section>
    <section class="ui-panel">
        <h2 class="ui-arrowlink">我推荐的书单:</h2>
        <ul id="booklist" class="ui-list ui-list-text ui-border-tb">
            <li class="ui-border-t">
                <div class="ui-list-info">
                    <h4 class="ui-nowrap">我的世界</h4>
                </div>
                <div class="ui-badge">高尔基</div>
            </li>
        </ul>
    </section>
        <div class="ui-form ui-border-t">
        <form action="{{ url_for("user.userbind") }}" method="POST">

            <div class="ui-form-item ui-border-b">
                <label>
                    图书名称:
                </label>
                <input type="text" name="bookname" id="bookname">
            </div>
            <div class="ui-form-item ui-border-b">
                <label>
                    作者:
                </label>
                <input type="text" name="bookauthor" id="bookauthor">
            </div>
            <br>
            <div class="ui-btn-wrap">
                <button type="button" class="ui-btn-lg ui-btn-primary" id="addtolistbtn">
                    确 定
                </button>
                <button type="button" class="ui-btn-lg ui-btn-primary" id="submitBtn" style="margin-top: 10px">
                    提交书单
                </button>
            </div>
            <br>
        </form>
    </div>
    </section>
{% endblock %}
{% block footer  %}
    <footer class="ui-footer ui-footer-stable">
    <h6 align="center" style="color: #8e8e93;">天津商业大学图书馆-微信公众平台</h6>
    </footer>
{% endblock %}
{% block script %}
    {{ super() }}
    <script type="text/javascript">
        var bookinput = $('form').serializeArray();
        var sublist = [];
        var $addtolistbtn = $('#addtolistbtn');
        $addtolistbtn.on('click', function(e){
            var bookname=$("input[id=bookname]").val();
            var bookauthor=$("input[id=bookauthor]").val();
            if(bookname === "" || bookauthor === ""){
                alert('不能为空');
                return false;
            }
            var booklist=$('#booklist');
            $('<li class="ui-border-t">' +
                    '<div class="ui-list-info"><h4 class="ui-nowrap">' +
                    bookname +
                    '</h4></div><div class="ui-badge">' +
                    bookauthor +
                    '</div> </li>').appendTo(booklist);
            var book = {
                'name':bookname,
                'author':bookauthor
            }
            sublist.push(book);
            var bookname=$("input[id=bookname]").val('');
            var bookauthor=$("input[id=bookauthor]").val('');
        })

        var $submitBtn = $('#submitBtn');
        $submitBtn.on('click', function(e){
            $.ajax({
                url: '',
                type: 'POST',
                data: {'data': sublist},
                success : function(data){
                    console.log(data);
                    alert('成功');
                    window.location.reload();
                }
            });
        })
    </script>
{% endblock %}
